<template>
  <div class="app-container">
    <div id="dataTime">【发泡蜡车间一】{{ FormatTime(nowTime) }}</div>
    <div id="app-container-down">
      <h2>设备运行状态</h2>
      <h6>
        <span v-html="msg1" style="color: #f56c6c"></span>
        <span v-html="msg2" style="color: #67c23a"></span>
        <span v-html="msg3" style="color: #e6a23c"></span>
      </h6>
      <el-table
        v-loading="loading"
        :data="table"
        border
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        :cell-style="isColor1"
      >
        >
        <el-table-column label="压蜡柱机" align="center" prop="state_ylz" />
        <el-table-column label="穿灯芯机" align="center" prop="state_cdx" />
        <el-table-column label="放蜡柱机" align="center" prop="state_flz" />
        <el-table-column label="自动上线" align="center" prop="state_zdsx" />
        <el-table-column label="预热罩" align="center" prop="state_yrz" />
        <el-table-column label="发泡蜡设备" align="center" prop="state_fpl" />
        <el-table-column label="灌装机" align="center" prop="state_gzj" />
        <el-table-column label="制冷系统" align="center" prop="state_zl" />
      </el-table>
      <el-table
        v-loading="loading"
        :data="table"
        border
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
        :cell-style="isColor2"
      >
        <el-table-column label="网带线一" align="center" prop="state_wdx1" />
        <el-table-column label="网带线二" align="center" prop="state_wdx2" />
        <el-table-column
          label="网带线一自动下线"
          align="center"
          prop="state_wdx1down"
        />
        <el-table-column
          label="网带线二自动上线"
          align="center"
          prop="state_wdx2up"
        />
        <el-table-column
          label="网带线二自动下线"
          align="center"
          prop="state_wdx2down"
        />
        <el-table-column label="螺旋提升机" align="center" prop="state_lxts" />
        <el-table-column label="油化蜡设备" align="center" prop="state_yhl" />
        <el-table-column label="工字封箱机" align="center" prop="state_gzfx" />
      </el-table>
      <div>
        <h2>设备参数警报</h2>
        <h6>
          <span v-html="msg4" style="color: #f56c6c"></span>
        </h6>
        <el-table
          v-loading="loading"
          :data="waningList"
          border
          :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          :cell-style="isColor3"
        >
          >
          <el-table-column label="压蜡柱机" align="center" prop="state_ylz" />
          <el-table-column label="自动上线" align="center" prop="state_zdsx" />
          <el-table-column label="预热罩" align="center" prop="state_yrz" />
        </el-table>
        <el-table
          v-loading="loading"
          :data="waningList"
          border
          :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          :cell-style="isColor4"
        >
          <el-table-column label="发泡蜡设备" align="center" prop="state_fpl" />
          <el-table-column label="制冷系统" align="center" prop="state_zl" />
          <el-table-column
            label="螺旋提升机"
            align="center"
            prop="state_lxts"
          />
          <el-table-column label="油化蜡设备" align="center" prop="state_yhl" />
        </el-table>
      </div>
    </div>
    <!-- 生产设备信息 -->
    <div class="shengchan">
      <h1>生产线设备数据信息</h1>
      <div class="app-container">
        <div class="down1">
          <h2>油化蜡设备关键数据信息</h2>
          <el-table
            border
            v-loading="loading"
            :data="List"
            :fit="fit"
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column
              label="一号蜡池温度(℃)"
              align="center"
              prop="waxTemp1"
            />
            <el-table-column
              label="二号蜡池温度(℃)"
              align="center"
              prop="waxTemp2"
            />
            <el-table-column
              label="三号蜡池温度(℃)"
              align="center"
              prop="waxTemp3"
            />
            <el-table-column
              label="四号蜡池温度(℃)"
              align="center"
              prop="waxTemp4"
            />
            <el-table-column
              label="五号蜡池温度(℃)"
              align="center"
              prop="waxTemp5"
            />
            <el-table-column label="进油口(℃)" align="center" prop="oilTemp1" />
            <el-table-column label="出油口(℃)" align="center" prop="oilTemp2" />
          </el-table>
        </div>
        <div class="down23">
          <div class="down2">
            <h2>预热罩设备信息</h2>
            <el-table
              border
              v-loading="loading"
              :data="List"
              :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
            >
              <el-table-column
                label="预热罩内温(℃)"
                align="center"
                prop="preTemperature"
              />
              <el-table-column
                label="胎膜温度(℃)"
                align="center"
                prop="yrzGlassTemp"
              />
            </el-table>
          </div>
          <div class="down3">
            <h2>制冷系统关键数据</h2>
            <el-table
              border
              v-loading="loading"
              :data="List"
              :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
            >
              <el-table-column
                label="冷却一温度(℃)"
                align="center"
                prop="freezeTemp1"
              />
              <el-table-column
                label="冷却二温度(℃)"
                align="center"
                prop="freezeTemp2"
              />
              <el-table-column
                label="冷却三温度(℃)"
                align="center"
                prop="freezeTemp3"
              />
            </el-table>
          </div>
        </div>
        <div class="down4">
          <h2>发泡蜡设备关键数据信息</h2>
          <el-table
            border
            v-loading="loading"
            :data="List"
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column
              label="保温水温(℃)"
              align="center"
              prop="warmWaterTemp"
            />
            <el-table-column
              label="冷却水(入)口温度(℃)"
              align="center"
              prop="coolDownwaterInTemp"
            />
            <el-table-column
              label="冷却水(出)口温度(℃)"
              align="center"
              prop="coolDownwaterOutTemp"
            />
            <el-table-column
              label="注蜡管道温度"
              align="center"
              prop="waxPutTemp"
            />
            <el-table-column
              label="输入气压(kpa)"
              align="center"
              prop="inputPressure"
            />
          </el-table>
        </div>
        <div class="down5">
          <h2>产量及产线速度数据信息</h2>
          <el-table
            border
            style="font-size: 15px"
            v-loading="loading"
            :data="List"
            :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
          >
            <el-table-column label="自动上线" align="center" prop="zdsxSpeed" />
            <!-- <el-table-column label="灌装量" align="center" prop="bottle" /> -->
            <el-table-column
              label="网带线一速度"
              align="center"
              prop="lineOne"
            />
            <el-table-column
              label="螺旋提升线速度"
              align="center"
              prop="lineScrew"
            />
          </el-table>
        </div>
      </div>
    </div>
    <div class="app-container">
      <h2>订单信息</h2>
      <el-table
        v-loading="loading"
        :data="postList"
        border
        style="font-size: 15px; width: 100%"
        :header-cell-style="{ background: '#409eff', color: '#ffffff' }"
      >
        <el-table-column label="序号" align="center" prop="flowid" width="50" />
        <el-table-column label="wdr号" align="center" prop="wdr" />
        <!-- <vueSeamlessScroll :data="postList" class="seamless-warp"  :class-option="optionCustomer"> -->
          <el-table-column label="订单编号" align="center" prop="orderNo" />
        <!-- </vueSeamlessScroll> -->
        <el-table-column label="零件号" align="center" prop="partNo" />
        <el-table-column label="订单描述" align="center" prop="orderDescribe" />
        <el-table-column label="订单数量(个)" align="center" prop="orderNum" />
        <el-table-column label="订单状态" align="center" prop="orderState" />
        <el-table-column label="订单进度" align="center" prop="progress" />
        <el-table-column label="合格率" align="center" prop="yield" />
        <el-table-column
          label="开始生产时间"
          align="center"
          prop="productTime"
          width="200"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import { cart1, keyData, state, warning } from "@/api/system/show1";
import vueSeamkessScroll from "vue-seamless-scroll";
export default {
  data() {
    return {
      msg1: "红色：停机 &emsp;&emsp;",
      msg2: "绿色：正常 &emsp;&emsp;",
      msg3: "黄色：故障/维修 ",
      msg4: "红色：异常 &emsp;&emsp;",
      tableValue: [],
      waningList: [],
      orderNo: [],
      fit: true,
      loading: true,
      times: null,
      timer: undefined,
      nowTime: new Date(),
      total: 0,
      optionCustomer: {
        step: 1,
        limitMoveNum: 2,
        openThouch:false,
        waitTime: 50,
        direction: 1,
        singleWidth: 30,
      },
      postList: [
        {
          flowid: null,
          wdr: null,
          productWorkshop: null,
          orderNo: null,
          partNo: null,
          orderDescribe: null,
          orderNum: null,
          orderState: null,
          yield: null,
          progress: null,
          startTime: null,
        },
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 11,
      },
      List: [
        {
          waxTemp1: null,
          waxTemp2: null,
          waxTemp3: null,
          waxTemp4: null,
          waxTemp5: null,
          oilTemp1: null,
          oilTemp2: null,
          preTemperature: null,
          yrzGlassTemp: null,
          zdsxSpeed: null,
          coolDownSpeed: null,
          mixSpeed: null,
          coolDownwaterTemp: null,
          warmWaterTemp: null,
          inputPressure: null,
          freezeTemp1: null,
          freezeTemp2: null,
          bottle: null,
          productNum: null,
          lineOne: null,
          lineTwo: null,
          lineScrew: null,
          deviceConsumptionAll: null,
          deviceConsumptionNow: null,
        },
      ],
      table: [],
      // myTest:''
      times: null,
      timer: undefined,
      nowTime: new Date(),
      publicPath: process.env.BASE_URL,
    };
  },
  components: {
    vueSeamkessScroll
  },
  created() {
    // 显示时间
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString();
    });
    this.getList();
    this.times = setInterval(() => {
      this.getList();
    }, 100000 * 10);

    this.getTypeList();
    this.times = setInterval(() => {
      this.getTypeList();
    }, 100000 * 10);
    this.list();
    this.times = setInterval(() => {
      this.list();
    }, 100000 * 10);
  },

  // 销毁定时器
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  destroyed() {
    //销毁
    clearInterval(this.times);
  },
  mounted() {
    this.getWarningList();
  },

  methods: {
    // isColor({ row, column, rowIndex, columnIndex }) {
    //   let isColor;
    //   switch (row.state_ylz) {
    //     case "正常":
    //       isColor = "background: green;";
    //       break;
    //     case "故障":
    //       isColor = "background:red;";
    //       break;
    //     default:
    //       isColor = "background:yellow;";
    //   }
    //   if (column.label === "压蜡柱机") return isColor;
    // },

    /** 查询岗位列表 */
    isColor1({ row, column, rowIndex }) {
      if (column.label === "压蜡柱机") {
        if (row.state_ylz === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_ylz === "故障") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_ylz === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_ylz === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "穿灯芯机") {
        if (row.state_cdx === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_cdx === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_cdx === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_cdx === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "放蜡柱机") {
        if (row.state_flz === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_flz === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_flz === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_flz === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "自动上线") {
        if (row.state_zdsx === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_zdsx === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_zdsx === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_zdsx === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "预热罩") {
        if (row.state_yrz === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_yrz === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_yrz === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_yrz === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "发泡蜡设备") {
        if (row.state_fpl === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_fpl === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_fpl === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_fpl === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "灌装机") {
        if (row.state_gzj === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_gzj === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_gzj === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_gzj === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "制冷系统") {
        if (row.state_zl === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_zl === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_zl === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_zl === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      }
    },
    isColor2({ row, column, rowIndex }) {
      if (column.label === "网带线一") {
        if (row.state_wdx1 === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_wdx1 === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_wdx1 === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_wdx1 === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "网带线二") {
        if (row.state_wdx2 === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_wdx2 === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_wdx2 === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_wdx2 === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "网带线一自动下线") {
        if (row.state_wdx1down === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_wdx1down === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_wdx1down === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_wdx1down === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "网带线二自动上线") {
        if (row.state_wdx2up === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_wdx2up === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_wdx2up === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_wdx2up === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "网带线二自动下线") {
        if (row.state_wdx2down === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_wdx2down === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_wdx2down === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_wdx2down === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "螺旋提升机") {
        if (row.state_lxts === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_lxts === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_lxts === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_lxts === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "油化蜡设备") {
        if (row.state_yhl === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_yhl === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_yhl === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_yhl === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      } else if (column.label === "工字封箱机") {
        if (row.state_gzfx === "正常") {
          return "background-color:#67c23a;color:#fff";
        } else if (row.state_gzfx === "故障") {
          return "background-color:#e6a23c;color:#fff";
        } else if (row.state_gzfx === "停机") {
          return "background-color:#f56c6c;color:#fff";
        } else if (row.state_gzfx === "维修") {
          return "background-color:#e6a23c;color:#fff";
        }
      }
    },
    isColor3({ row, column, rowIndex }) {
      if (column.label === "压蜡柱机") {
        if (row.state_ylz === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      } else if (column.label === "自动上线") {
        if (row.state_zdsx === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      } else if (column.label === "预热罩") {
        if (row.state_yrz === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      }
    },
    isColor4({ row, column, rowIndex }) {
      if (column.label === "发泡蜡设备") {
        if (row.state_fpl === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      } else if (column.label === "灌装机") {
        if (row.state_gzj === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      } else if (column.label === "制冷系统") {
        if (row.state_zl === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      } else if (column.label === "螺旋提升机") {
        if (row.state_lxts === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      } else if (column.label === "油化蜡设备") {
        if (row.state_yhl === "正常") {
          return;
        } else {
          return "background-color:#f56c6c;color:#fff";
        }
      }
    },
    getWarningList() {
      warning().then((res) => {
        // console.log("warning", res.data);
        this.waningList = res.data;
      });
    },
    getList() {
      this.loading = true;
      cart1(this.queryParams).then((response) => {
        // console.log(response)
        this.postList = response.data;
        this.total = response.total;
        this.loading = false;
        response.data.map((item, index, arr) => {
          if (item.orderNo !== null) {
            if (item.orderNo.indexOf("*") !== -1) {
              item.orderNo = item.orderNo.replace(/\*/g, "\n");
              this.orderNo.push(item.orderNo.split("\n"));
            }
            if (item.orderNo.indexOf(".") !== -1) {
              item.orderNo = item.orderNo.replace(/\./g, "\n");
              this.orderNo.push(item.orderNo.split("\n"));
            }
          }
          if (item.partNo !== null) {
            if (item.partNo.indexOf("*") !== -1) {
              item.partNo = item.partNo.replace(/\*/g, "\n");
              this.orderNo.push(item.orderNo.split("\n"));
            }
            if (item.partNo.indexOf(".") !== -1) {
              item.partNo = item.partNo.replace(/\./g, "\n");
              this.orderNo.push(item.orderNo.split("\n"));
            }
          }
        });
      });
    },
    getTypeList() {
      this.loading = true;
      keyData().then((response) => {
        this.List = response.data;
        this.loading = false;
      });
    },

    list() {
      this.loading = true;
      state().then((response) => {
        this.table = response.data;
        this.loading = false;
      });
    },
    //让table的字变成红色
    // state(row, column, rowIndex, columnIndex) {
    //   if (row.column.label == "放蜡柱机" || row.row.table === "停机") {
    //     return 'background-color:red'
    //   }
    //   if (row.column.label == "压蜡柱机" || row.row.table === "停机") {
    //     return 'background-color:red'
    //   }
    // },
    FormatTime() {
      //返回显示的日期时间格式
      var date = new Date();
      var year = this.formatTime(date.getFullYear());
      var month = this.formatTime(date.getMonth() + 1);
      var day = this.formatTime(date.getDate());
      var hour = this.formatTime(date.getHours());
      var minute = this.formatTime(date.getMinutes());
      var second = this.formatTime(date.getSeconds());
      var weekday = date.getDay();
      var weeks = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      );
      var week = weeks[weekday];
      return `${year}-${month}-${day} ${hour}:${minute}:${second} ${week}`;
    },
    formatTime(n) {
      //判断是否需要加0
      if (n < 10) {
        return "0" + n;
      } else {
        return n;
      }
    },
  },
};
</script>

<style scoped>
h2 {
  color: #0072c6;
  font-size: 27px;
  text-align: center;
  /* background-color: ; */
}

#dataTime {
  text-align: center;
  font-size: 38px;
  color: #19198c;
  position: relative;
  /* margin-top: -90px; */
}

h2 {
  font-size: 20px;
  color: #73a6c6;
  /* float: left; */
}

h6 {
  font-size: 15px;
  color: #b11d06;
  float: right;
  margin-top: -47px;
  margin-left: -200px;
}
.warpper {
  width: 1500px;
  height: 100%;
  margin: 0 auto;
}
.app-container {
  display: flex;
  flex-direction: column;
}
.shengchan {
  margin-top: 30px;
}
.shengchan h1{
  text-align: center;
  font-style: normal;
  font-size: 30px;
  color: #73a6c6;
}

.down1 {
  width: 100%;
  margin-top: -10px;
}
.down2 {
  margin-top: 20px;
  width: 45%;
  float: left;
  /* background-color: aqua; */
}
.down3 {
  margin-top: 20px;
  /* background-color: firebrick; */
  width: 45%;
  float: left;
  margin-left: 10%;
}
.down4 {
  margin-top: 20px;
}
#app-container-down {
  margin-top: 20px;
  /* color: #000000;
  width: 100%;
  font-size: 15px; */
  margin: 40px 15px;
}
.app-container >>> .el-table .cell {
  white-space: pre-wrap;
}
/* 驾驶舱按钮 */
.cockpit{
  position: absolute;
  right: 25px;
  bottom: -65px;
  font-size: 12px;
  padding: 8px 10px;
}
</style>
